<template>
    <div class="viewBrokerageStore">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>合约中心</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/channelOrAgentManage' }">渠道经纪管理</el-breadcrumb-item>
            <el-breadcrumb-item>查看经纪门店</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" size="small" :model="filterForm" class="demo-form-inline">
            <el-form-item label="城市：">
                <el-select v-model="filterForm.cityid" placeholder="请选择城市">
                    <el-option
                            v-for="item in allCityList"
                            :key="item.cityId"
                            :label="item.city"
                            :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司名称：">
                <el-input v-model="filterForm.customerName" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="门店名称：">
                <el-input v-model="filterForm.storeName" placeholder="请输入门店名称"></el-input>
            </el-form-item>
            <el-form-item label="公司合作状态：">
                <el-select v-model="filterForm.status" placeholder="请选择合作状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="未合作" :value="0"></el-option>
                    <el-option label="合作中" :value="2"></el-option>
                    <el-option label="审核中" :value="1"></el-option>
                    <el-option label="审核不通过" :value="3"></el-option>
                    <el-option label="合作终止" :value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                tooltip-effect="dark"
                border>
            <el-table-column
                    type="index"
                    align="center"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="storesCity"
                    align="center"
                    label="城市">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    align="center"
                    width="150"
                    label="公司名称">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    width="120"
                    label="公司合作状态">
                <template slot-scope="scope">
                    {{['未合作','审核中','合作中','审核不通过','合作终止'][scope.row.status]}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="storeNumber"
                    align="center"
                    width="120"
                    label="门店编码">
            </el-table-column>
            <el-table-column
                    prop="area"
                    align="center"
                    label="服务板块">
            </el-table-column>
            <el-table-column
                    prop="storesName"
                    width="150"
                    align="center"
                    label="门店名称">
            </el-table-column>
            <el-table-column
                    prop="storeCompetence"
                    label="权限">
            </el-table-column>
            <el-table-column
                    prop="house"
                    label="新房分佣比例">
                <template slot-scope="scope">{{scope.row.house === -1 ? '' : scope.row.house+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="insurance"
                    label="保险分佣比例">
                <template slot-scope="scope">{{scope.row.insurance === -1 ? '' : scope.row.insurance+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="property"
                    label="产权分佣比例">
                <template slot-scope="scope">{{scope.row.property === -1 ? '' : scope.row.property+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="新建时间">
            </el-table-column>
            <el-table-column
                    prop="leaderName"
                    label="门店归属">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="职业经纪人签约人数">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    align="center"
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope.row.id, scope.row.storeNumber)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="mt15"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="filterForm.pageSize"
                :current-page="filterForm.pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableDataTotal">
        </el-pagination>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'viewBrokerageStore',
        data() {
            return {
                filterForm: {
                    cityid: '',
                    customerName: '',
                    storeName: '',
                    status: '',

                    pageSize: 10,
                    pageNum: 1,
                },
                allCityList: [],
                tableDataTotal: 10,
                tableData: []
            }
        },
        mounted() {
            const query = this.$route.query
            this.filterForm.cityid = query.cityid;
            this.filterForm.customerName = query.companyName;
            this.getAllCity()
            this.getTableList()
        },
        activated() {
            this.getTableList()
        },
        methods: {
            query() {
                this.filterForm.pageNum = 1;
                this.getTableList()
            },
            reset() {
                this.filterForm = {
                    cityid: '',
                    customerName: '',
                    storeName: '',
                    status: '',

                    pageSize: 10,
                    pageNum: 1,
                }
            },
            goDetail(id, storeNumber){
                console.log(this.filterForm);
                this.$router.push({
                    path: '/viewBrokerageStoreDetail',
                    query: {
                        id,
                        storeNumber,
                        cityId: this.filterForm.cityid,
                        companyName: this.filterForm.customerName,
                    }
                })
            },
            getTableList() {
                this.$axios.post("/cms/stores/stores/selectStore", this.filterForm).then((res) => {
                    //console.log(res.list[0]);
                    this.tableData = res.list;
                    this.tableDataTotal = res.total;
                })
            },
            handleSizeChange(val) {
                this.filterForm.pageSize = val;
                this.getTableList()
            },
            handleCurrentChange(val) {
                this.filterForm.pageNum = val;
                this.getTableList()
            },
            getAllCity() {
                this.$axios.post('/city/cityList', {}).then((res) => {
                    this.allCityList = res.cityList
                })
            },
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>

